<template>
  <div class="model_wrap">
    <h1>{{modelData.category}}</h1>
    <div class="model_info">
      <div class="model_left">
        <div class="shen_total">
          <h4>申报人数</h4>
          <h3>{{modelData.declarationTotal}}</h3>
        </div>
        <div class="shenbao_info">
          <div>
            <h4>待申报（人）</h4>
            <h3>{{modelData.toDeclareTotal}}</h3>
          </div>
          <div>
            <h4>申报中（人）</h4>
            <h3>{{modelData.declaringTotal}}</h3>
          </div>
          <div>
            <h4>已申报（人）</h4>
            <h3>{{modelData.declaredTotal}}</h3>
          </div>
        </div>
      </div>
      <div class="model_right">
        <!-- 生成图表的位置 -->
        <div id="mychart" ref="lineChart" />
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'VueHrimChartsModel',
  props:{
     modelData:{ //组件需要的 父传子数据
      type:Object,
      default(){
        return {}
      }
     }
  },
  data() {
    return {
        msg:""
    }
  },
  created() {
    this.$nextTick(() => {
      this.makeLineChart()
    })
  },
  watch:{ //可以监听 data数据， props数据，监听$route的变化
    msg(newVal,oldVal){

    },
      modelData:{
        handler(newVal){
            // 监听父传子的数据modelData的变化  有新的值 重新初始化图表
            this.makeLineChart();
        },
        deep:true, //开启深度监听
        // immediate:true,//进入组件立即监听
        
      }
  },
  mounted() {

  },

  methods: {
    makeLineChart() { // 生成折线图的方法
      // 1. 获取 要生成图标的dom 初始化ehcarts操作实例

      const mychart = this.$echarts.init(this.$refs.lineChart)
      // 2.准备好 echarts实例配置项
      const option = {
        title: { // 图表的标题
          text: this.modelData.category
        },
        legend: { // 图表的图例
          show: true
        },

        grid: {
            shadowColor:"#00ff00",
           backgroundColor:"#00ff00"
        }, // 调整网格 和 一些 图像的位置
        tooltip: {}, // 图表 鼠标经过的提示等
        xAxis: {
          type: 'category', // type  分类
          boundaryGap: false,
          data: this.modelData.xAxis//使用父传子的x轴数据
        },
        yAxis: {
          type: 'value' // y轴 类型
        },
        series: [ // 数据加载
          {
            data:this.modelData.yAxis,
            type: 'line',
            lineStyle:{ //折线的样式
              color:"#50d8ef"
            },
            areaStyle: { //填充区域样式
              color:"#50d8ef"
            }
          }
        ]
      }
      // 将图标的option设置给实例
      mychart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.model_wrap{
  width:100%;
  height:355px;
  margin-top: 20px;
  background:white;
.model_info{
 display:flex;

 .model_left{
      width:240px;
      height:315px;
        .shen_total{
          width:240px;
          height:80px;
          h3{
            color:aquamarine;
          }
        }
      .shenbao_info{
        width:240px;
        height:185px;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        text-align:center;
        justify-content:space-between;
        font-size:15px;
         background: #ccc;
      }
    }
    .model_right{
        flex:1;
       height:315px;
       margin-left:40px;
      #mychart{
        width:665px;
        height:280px;
      }
    }
  }

}

</style>
